// 利用reduse拼接字符串
// 获取tbody元素
const tbody = document.querySelector('tbody');
// 模态框
const modal = document.querySelector('.modal-dialog-centered');
// 省份标签
const provinceDom = document.querySelector('[name="province"]');
// 市标签
const cityDom = document.querySelector('[name="city"]');
// 悬标签
const countyDom = document.querySelector('[name="county"]');
// 表单
const addForm = document.querySelector('.add-form');
// 编辑元素
// const Editing = document.querySelector('.btn-update');
// 模态框标题
const addModalLabel = document.querySelector('#addModalLabel');
// 交叉元素
const x = document.querySelector('.btn-close');
// 全局id
let id
// 1、获取学生信息
async function Rendering() {
    const render = await axios({
        url: "student/list",
    })
    // console.log(render);
    const list = render.data.data
    const html = list.reduce((prve, item) => {
        // 对象解构
        const { id, name, sex, age, group, phone, salary, truesalary, province, city, county } = item
        return prve + `
        <tr>
        <th scope="row">${id}</th>
        <td>${name}</td>
        <td>${sex}</td>
        <td>${age}</td>
        <td>${group}</td>
        <td>${phone}</td>
        <td>${salary}</td>
        <td>${truesalary}</td>
        <td>${province + city + county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm btn-update" data-id="${id}">修改</button>
          <button type="button" class="btn btn-danger btn-sm Delete " data-id="${id}">删除</button>
        </td>
      </tr>
        `
    }, "")
    tbody.innerHTML = html
    /* 
    用reduce做渲染的总结：
    比map和join更加的简洁了，不过一开始有点不习惯，首先先获取后台的数据，用一个变量接受新的拼接后的数组，reduce有三个注意点
    1、有两个函数和一个初始值，第一个函数是上一个如果有初始值就是按照初始值的来
    2、第二个函数是下一个函数，用第一个初始值加第一个函数结合，第二次就是把第二个函数的内容结合
    3、注意要字符串拼接要空字符串才能做到拼接
    
    */
}
Rendering()
// 2、打开模态框
modal.addEventListener('click', function (e) {
    $("#addModal").modal("show");
    addModalLabel.innerHTML = "新增学生成员"
})
// 打开页面初始化
function init() {
    // 2 初始化省市区 组件
    // 2.1 动态获取省份信息
    getProvince();
    // 2.2 绑定change事件 。。。
    // 省份绑定change事件
    provinceDom.addEventListener("change", function () {
        getCity(provinceDom.value);
    });

    // 市绑定 change事件
    cityDom.addEventListener("change", async function () {
        // console.log(provinceDom.value);
        getCounty(provinceDom.value, cityDom.value);
    });
}

init();
// 3.1、获取省数据
async function getProvince() {
    const result = await axios({
        url: "geo/province",
    })
    const province = result.data
    const html = province.reduce((prve, item) => prve + `<option value="${item}">${item}</option>`, `<option selected value="">--省--</option>`)
    provinceDom.innerHTML = html
}
// 获得市数据
async function getCity(pname) {
    const result = await axios({
        url: "geo/city",
        params: { pname }
    })
    const city = result.data
    const html = city.reduce((prve, item) => prve + `<option value="${item}">${item}</option>`, `<option selected value="">--市--</option>`)
    cityDom.innerHTML = html
    // 还原 悬
    countyDom.innerHTML = "<option value='' >--县--</option>";
}

// 获得悬数据
async function getCounty(pname, cname) {
    const result = await axios({
        url: "geo/county",
        params: { pname, cname }
    })
    console.log(result);
    const county = result.data
    const html = county.reduce((prve, item) => prve + `<option value="${item}">${item}</option>`, `<option selected value="">--悬--</option>`)
    countyDom.innerHTML = html

}

//把快速获取单独提出出来使用
// 根据全局id来获取

// 提交功能
addForm.addEventListener('submit', async function (e) {
    e.preventDefault();
    let data = serialize(this, { hash: true, empty: true })
    let result
    // 5、判断执行编辑还是添加
    if (addModalLabel.innerHTML === "新增学生成员") {
        // 删除id数据
        delete data.id;
        result = await axios({
            // 新增
            url: "/student/add",
            method: "POST",
            data: data,
        })
    } else {
        data.id = id
        result = await axios({
            // 修改
            url: "student/update",
            method: "PUT",
            data: data
        })
    }
    // 友好提示框
    if (result.data.code === 0) {
        toastr.success("操作成功")
    }
    // 重置表单
    this.reset()
    // 重新刷新
    Rendering()
    // 关闭模态框
    $("#addModal").modal("hide");

})
// 4、tbody打开模态框，事件委托

// 4.1、tbody修改
tbody.addEventListener('click', async function (e) {
    if (e.target.classList.contains("btn-update")) {
        // 打开模态框
        $("#addModal").modal("show");
        // 修改模态框标题
        addModalLabel.innerHTML = "编辑学员"
        // 根据id来获取要修改id
        id = e.target.dataset.id
        console.log(id);
        // 向后台发送请求
        const result = await axios({
            url: "student/one",
            params: { id }
        })
        // 获得编辑的数据
        const data = result.data.data
        await getCity(data.province); // 异步
        await getCounty(data.province, data.city);
        // 获取到addForm标签里面所有的带name属性的dom元素
        const nameDomList = addForm.querySelectorAll("[name]"); 
        nameDomList.forEach((dom) => {
            if (dom.name !== "sex") {
                addForm.querySelector(`[name=${dom.name}]`).value = data[dom.name];
            }
        });
        addForm.querySelector(`[name=sex][value=${data.sex}]`).checked = true;
    }

})
// 5、删除功能
tbody.addEventListener('click', async function (e) {
    if (e.target.classList.contains("Delete")) {
        if (confirm("你确定要删除了吗？")) {
            id = e.target.dataset.id
            console.log(id);
            const result = await axios({
                url: `student/delete/?id=${id}`,
                method: "DELETE",
            })
            console.log(result);
            // 友好提示框
            if (result.data.code === 0) {
                toastr.success("删除成功")
            }
            // 刷新页面
            Rendering()


        }

    }
})
// 点击x号就重置表单
x.addEventListener('click', function (e) {
    addForm.reset()
})